<:!:/>

@file c.comic.html
@author Alejandro Dario Simi
@date $Date: 2013-07-05 14:30:06 +0000 (Fri, 05 Jul 2013) $

$Id: c.comic.html 89 2013-07-05 14:30:06Z daemonraco@gmail.com $
$URL: http://wcomix.googlecode.com/svn/tags/wcomix-1.0.0.2/themes/mdefault/templates/contents/c.comic.html $

<::/>
<script type="text/javascript">
	var	EnforceSize_times = 0;

	function EnforceSize() {
		if($("#FullImage").height() < 10 || $("#FullImage").width() < 10) {
			EnforceSize_times++;

			var src = $("#FullImage").attr("src");
			queryPos = src.indexOf("?");
			if(queryPos != -1) {
				src = src.substring(0, queryPos);
			}
			console.log("Enforcing Size: " + EnforceSize_times + ". Size: " + $("#FullImage").width() + "x" + $("#FullImage").height());

			$("#FullImage").attr("src", src + "?" + Math.random());
			setTimeout("ResizeFullImage();", 500);
		}
	}

	function GoInfo() {
		document.location.href = '<:VAR:/>LNKINFO<::/>';
		return false;
	}

	function GoNext() {
		document.location.href = '<:VAR:/>LNKNEXT<::/>';
		return false;
	}

	function GoPrevious() {
		document.location.href = '<:VAR:/>LNKPREV<::/>';
		return false;
	}

	function GoTable() {
		document.location.href = '<:VAR:/>LNKTABLE<::/>';
		return false;
	}

	function ResizeFullImage() {
		var iHeight = $("#FullImage").height();
		var iWidth = $("#FullImage").width();
		var wHeight = $(window).height();
		var wWidth = $(window).width();

		var x = wWidth;
		var y = Math.round(iHeight * wWidth / iWidth);

		$("#FullImage").css({
			height: y,
			left: 0,
			top: 30,
			width: x
		});

		var xJump = Math.round(x / 3);
		var yJump = Math.round(y / 2);

		var sector_1_1 = "0,0," + xJump + "," + yJump;
		var sector_2_1 = xJump + ",0," + (xJump * 2) + "," + yJump;
		var sector_3_1 = (xJump * 2) + ",0," + x + "," + yJump;
		var sector_1_2 = "0," + yJump + "," + xJump + "," + y;
		var sector_2_2 = xJump + "," + yJump + "," + (xJump * 2) +"," + y;
		var sector_3_2 = (xJump * 2) + "," + yJump + "," + x + "," + y;

		var rhtml="";
		rhtml += '<area shape="rect" coords="' + sector_1_1 + '" href="#" onclick="GoPrevious()">';
		rhtml += '<area shape="rect" coords="' + sector_1_2 + '" href="#" onclick="GoNext()">';

		rhtml += '<area shape="rect" coords="' + sector_2_1 + '" href="#" onclick="GoInfo()">';
		rhtml += '<area shape="rect" coords="' + sector_2_2 + '" href="#" onclick="GoTable()">';

		rhtml += '<area shape="rect" coords="' + sector_3_1 + '" href="#" onclick="GoPrevious()">';
		rhtml += '<area shape="rect" coords="' + sector_3_2 + '" href="#" onclick="GoNext()">';

		$("#FullImageMap").html(rhtml);

		//EnforceSize();
	}

	window.onorientationchange = ResizeFullImage;
</script>

<img id="FullImage" src="<:VAR:/>MAINIMG<::/>" onload="ResizeFullImage()" usemap="#FullImageMap"/>
<map id="FullImageMap" name="FullImageMap"></map>
<:INCLUDE:/>/generics/pager.html<::/>
